<template>
  <div>
    <div class="txt"><span>X</span>当前城市 -</div>
    <van-index-bar :index-list="indexList" v-for="(item,index) in indexList" :key="index">
      <van-index-anchor :index="item" />
      <van-cell v-for="(item, index) in List[item]" :key="index" :title="item.name" />
    </van-index-bar>
  </div>
</template>
<script>
import axios from "@/uitls/request.js";
export default {
  data() {
    return {
      citylist: [],
     List: {},
      indexList: [],
    };
  },
  created() {
    this.getcity();
  },

  methods: {
    getcity() {
      axios({
        url: "gateway?k=6111304",
        data: {
          xHost: "mall.film-ticket.city.list",
        },
      }).then((res) => {
        this.citylist = res.data.cities;
        this.indexlist();
      });
    },
    indexlist() {
      let result = {};
      let arr2 = [];
      var arr = this.citylist.map((item) => {
        var key = item.pinyin.slice(0, 1).toUpperCase();
        if (!result[key]) {
          result[key] = [];
         this.indexList.push(key);
        }
        this.indexList.sort();
        result[key].push(item);
      });
      this.List = result;
    },
  },
};
</script>
<style lang="less" scoped>
.txt {
  width: 100%;
  height: 0.88rem;
  background-color: #fff;
  color: #191a1b;
  text-align: center;
  line-height: 0.88rem;
  font-size: 0.34rem;
}
</style>
